import { ref } from 'vue'

import { Header } from '../table'
import { ColDef } from 'ag-grid-community'
export const getTable = () => {
  const headerInit:Header = {
    headerName: '1'
  }
  const headerSetting = ref(headerInit)
  const pagination = ref({
    total: 0,
    pageSize: 0
  })
  const headersInit: Array<ColDef> = []
  const headers = ref(headersInit)
  const dataInit:Array<any> = []
  const datas = ref(dataInit)
  const getHeaders = () => {
    //  async get headers by api TD
    // test
    // const arr:Array<Header> = [
    //   { prop: 'name', label: 'name' },
    //   { prop: 'age', label: 'age' },
    //   { prop: 'carrer', label: 'carrer' },
    //   { prop: 'family', label: 'family' }
    // ]

    // arr.map((header:Header) => {
    //   return Object.assign(header, headerInit)
    // })
    // headers.value = headers.value.concat(arr)
  }

  const getDatas = () => {
    // get data by api TD
    // test
    const arr:Array<any> = [
      { name: 'wu1', age: '24', carrer: 'enginner', family: 'unknown' },
      { name: 'wu2', age: '24', carrer: 'enginner', family: 'unknown' },
      { name: 'kang3', age: '24', carrer: 'enginner', family: 'unknown' },
      { name: 'kang4', age: '24', carrer: 'enginner', family: 'unknown' }
    ]

    datas.value = datas.value.concat(arr)
  }

  const getFilters = () => {

  }

  const saveSetting = () => {

  }
  return {
    headers,
    datas,
    pagination,
    getHeaders,
    getDatas,
    getFilters,
    saveSetting,
    headerSetting
  }
}
